<script>
import echarts from "echarts";
import "echarts-wordcloud/dist/echarts-wordcloud";
import "echarts-wordcloud/dist/echarts-wordcloud.min";
export default {
    name: "VueWordCloud",
    data() {
        return {
            msg: 'Welcome to Your Vue.js App',
            worddata: [
                {
                    name: "十九大精神",
                    value: 15000
                },
                {
                    name: "两学一做",
                    value: 10081
                }, {
                    name: "中华民族",
                    value: 9386
                },
                {
                    name: "马克思主义",
                    value: 7500
                },
                {
                    name: "民族复兴",
                    value: 7500
                },
                {
                    name: "社会主义制度",
                    value: 6500
                },
                {
                    name: "国防白皮书",
                    value: 6500
                },
                {
                    name: "创新",
                    value: 6000
                },
                {
                    name: "民主革命",
                    value: 4500
                },
                {
                    name: "文化强国",
                    value: 3800
                },
                {
                    name: "国家主权",
                    value: 3000
                },
                {
                    name: "伟大复兴",
                    value: 2500
                },
                {
                    name: "领土完整",
                    value: 2300
                },
                {
                    name: "安全",
                    value: 2000
                },
                {
                    name: "从严治党",
                    value: 1900
                },
                {
                    name: "现代化经济体系",
                    value: 1800
                },
                {
                    name: "国防动员",
                    value: 1700
                },
                {
                    name: "信息化战争",
                    value: 1600
                },
                {
                    name: "局部战争",
                    value: 1500
                },
                {
                    name: "教育",
                    value: 1200
                },
                {
                    name: "中国梦",
                    value: 1100
                },
                {
                    name: "孙子兵法",
                    value: 900
                },
                {
                    name: "一国两制",
                    value: 800
                },
                {
                    name: "特色社会主义思想",
                    value: 700
                },
            ]
        }
    },
    mounted() {
        this.initChart();
    },
    methods: {
        initChart() {
            this.chart = echarts.init(document.getElementById("mywordcloud"));
            console.log('lll');
            const option = {
                title: {
                    text: "热爱祖国",
                    x: "center"
                },
                backgroundColor: "#fff",
                // tooltip: {
                //   pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
                // },
                series: [
                    {
                        type: "wordCloud",
                        //用来调整词之间的距离
                        gridSize: 10,
                        //用来调整字的大小范围
                        // Text size range which the value in data will be mapped to.
                        // Default to have minimum 12px and maximum 60px size.
                        sizeRange: [14, 60],
                        // Text rotation range and step in degree. Text will be rotated randomly in range [-90,                                                                             90] by rotationStep 45
                        //用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
                        // rotationRange: [-45, 0, 45, 90],
                        // rotationRange: [ 0,90],
                        rotationRange: [0, 0],
                        //随机生成字体颜色
                        // maskImage: maskImage,
                        textStyle: {
                            normal: {
                                color: function () {
                                    return (
                                        "rgb(" +
                                        Math.round(Math.random() * 255) +
                                        ", " +
                                        Math.round(Math.random() * 255) +
                                        ", " +
                                        Math.round(Math.random() * 255) +
                                        ")"
                                    );
                                }
                            }
                        },
                        //位置相关设置
                        // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
                        // Default to be put in the center and has 75% x 80% size.
                        left: "center",
                        top: "center",
                        right: null,
                        bottom: null,
                        width: "200%",
                        height: "200%",
                        //数据
                        data: this.worddata
                    }
                ]
            };
            this.chart.setOption(option);
        },
    }
}
</script>
<template>
    <div id="mywordcloud" :style="{ width: '100%', height: '300px' }" :data="worddata"></div>
</template>

<style scoped lang="scss">

</style>